<template>
    <!-- 可以有多个根元素 -->
    <div>当前鼠标位置</div>
    <div>x: {{ mouse.x }}</div>
    <div>y: {{ mouse.y }}</div>
    <div>当前点击次数：{{ count }}</div>
    <button @click="add">点击</button>
</template>
  
  <script>
  import { onMounted, onUnmounted, reactive, ref } from 'vue'
  
  //   hooks - 钩子函数
  // 业务A - 计数器
  const useCount = () => {
      // 业务A开始----------------------
      const count = ref(0)
      const add = () => {
          count.value++
      }
      // 业务A结束----------------------
      return { count, add }
  }
  
  // 业务A - 鼠标移动
  function mouseMove() {
      //   业务B开始-------------------
      const mouse = reactive({
          x: 0,
          y: 0,
      })
  
      const move = (e) => {
          mouse.x = e.pageX
          mouse.y = e.pageY
      }
      onMounted(() => {
          document.addEventListener('mousemove', move)
      })
      onUnmounted(() => {
          document.removeEventListener('mousemove', move)
      })
      //   业务B结束-------------------
  
      return { mouse }
  }
  
  export default {
      setup() {
          const { count, add } = useCount()
          const { mouse } = mouseMove()
  
          //   template需要用到的数据，需要手动return出去
          return {
              count,
              add,
              mouse,
          }
      },
  }
  </script>
  